<template>
  <div class="addressRecord">
    <!-- <div class="record">
      <div>
        <span class="identity">shd(15920320596)</span>
        <span class="default">默认</span>
      </div>
      <span class="address">广东省广州市番禺区上漖村</span>
    </div> -->
    <div class="record" v-for="item in addressList" :key="item.id">
      <div class="record_left">
        <div>
          <span class="identity">{{ item.name }}({{ item.phone }})</span>
          <span class="default">默认</span>
        </div>
        <span class="address">{{ item.area_name + item.desc }}</span>
      </div>
      <div class="record_right">
        <div class="address_modal">
          <a class="modify" @click="showModal">修改</a>
          <a-modal v-model="visible" title="收货地址">
            <div class="form">
              <div>
                <a-input value="中国" disabled />
              </div>
              <div>
                <a-input v-model="name" @blur="checkName" placeholder="姓名" />
                <span class="tip">{{ nameTip }}</span>
              </div>
              <div>
                <a-input
                  v-model="phone"
                  @blur="checkPhone"
                  placeholder="手机号"
                />
                <span class="tip">{{ phoneTip }}</span>
              </div>
              <div class="cascader">
                <a-cascader
                  :options="options"
                  v-model="address"
                  placeholder="地址"
                  @blur="checkAddress"
                >
                </a-cascader>
                <span class="addressTip">{{ addressTip }}</span>
              </div>
              <div>
                <a-input
                  v-model="detail"
                  @blur="checkDetail"
                  placeholder="详细地址"
                />
                <span class="tip">{{ detailTip }}</span>
              </div>
              <a-checkbox @click="setDefault()">设为默认</a-checkbox>
            </div>
            <template slot="footer">
              <a-button key="back" @click="handleCancel"> 取消 </a-button>
              <a-button key="submit" type="primary" @click="handleOk()">
                保存
              </a-button>
            </template>
          </a-modal>
        </div>
        <a class="del">删除</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getCity } from "../assets/js/request.js";
import { mapState, mapActions } from "vuex";

let nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
let phoneReg =
  /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
export default {
  components: {},
  data() {
    return {
      visible: false,
      name: "",
      phone: "",
      address: [],
      detail: "",
      nameTip: "",
      phoneTip: "",
      addressTip: "",
      detailTip: "",
      options: [],
    };
  },
  computed: {
    ...mapState("address", ["addressList"]),
    // showaddress() {
    //   console.log(this.address);
    //   return this.addrerss
    // }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    async handleOk() {
      console.log(this.address);
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
    // 输入内容检查
    checkName() {
      if (this.name === "") {
        this.nameTip = "姓名必填";
      } else if (!nameReg.test(this.name)) {
        this.nameTip = "姓名格式不对";
      } else {
        this.nameTip = "";
      }
    },
    checkPhone() {
      if (this.phone === "") {
        this.phoneTip = "手机号必填";
      } else if (!phoneReg.test(this.phone)) {
        this.phoneTip = "手机号格式不对";
      } else {
        this.phoneTip = "";
      }
    },
    checkAddress() {
      if (this.address.length === 0) {
        this.addressTip = "地址必填";
      } else {
        this.addressTip = "";
      }
    },
    checkDetail() {
      if (this.detail === "") {
        this.detailTip = "详细地址必填";
      } else {
        this.detailTip = "";
      }
    },
  },
  async created() {
    let city = await getCity();
    console.log(city);
    this.options = city;
  },
};
</script>

<style lang="scss" scoped>
.addressRecord {
  .record {
    font-size: 14px;
    border: 1px solid #dddddd;
    padding: 18px 16px;
    margin: 0 0 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .record_left {
      div {
        .default {
          color: #979797;
          font-size: 12px;
          margin-left: 12px;
        }
      }
      .address {
        font-size: 13px;
      }
    }
    .record_right {
      display: flex;
      align-items: center;
      margin-right: 24px;
      .address_modal {
        a {
          display: block;
          margin-right: 24px;
        }
        .modify {
          color: #44a8f2;
        }
        .form {
          div {
            margin: 0 0 36px;
            position: relative;
            .ant-input {
              height: 44px;
              color: black;
            }
            .tip {
              color: red;
              position: absolute;
              top: 44px;
              left: 0;
            }
          }
          div:first-of-type {
            margin: 0 0 24px;
          }
          .cascader {
            position: relative;
            .ant-cascader-picker {
              width: 100%;
              position: static;
              .ant-cascader-input {
                height: 44px;
                width: 100%;
                background-color: yellow;
              }
            }
            .addressTip {
              color: red;
              position: absolute;
              top: 44px;
              left: 0;
            }
          }
        }
        .del {
          color: palevioletred;
        }
      }
    }
  }
  .record:hover {
    border: 1px solid black;
  }
  // .active {
  //   background-color: #ecf6fe;
  //   border: 1px solid #97cef7;
  //   box-sizing: border-box;
  // }
}
</style>